<template>
	<view>
		<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange" :height="100"></me-tabs>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption" top="100">
			<view class="inviteinfo" v-for="(item,index) in datalist" :key="index">
				<view class="left">
					<image class="useravatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="userinfo">
						<view class="nickname">{{item.nickname.length>18?item.nickname.substring(0,18)+'...':item.nickname}}<text :class="['font-normals',item.activation==1?'font-alredy':'']">{{item.activation==1?'(已激活)':'(未激活)'}}</text></view>
						<text>{{item.add_time}}</text>
					</view>
				</view>
				<!-- 	<view class="right">
				<text class="rechange">累计充值</text>
				<text>0元</text>
			</view> -->
			</view>
			<!-- 	<view class="inviteinfo">
			<view class="left">
				<image class="useravatar" src="/static/image/wx-img.jpg" mode="aspectFill"></image>
				<view class="userinfo">
					<text class="nickname">刘某某(未实名)</text>
					<text>05-15 11:24</text>
				</view>
			</view>
			<view class="right">
				<text class="rechange">累计充值</text>
				<text>2001元</text>
			</view>
		</view> -->
		</mescroll-uni>
	</view>
</template>

<script>
	/**
	 * 邀请好友列表
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				nams: "hb哈吉斯hdv就订单号电话是的横杆讲得好施工进度好",
				datalist: [],
				url: ['/promote/lists', '/promote/lists2','/promote/lists3'],
				tabIndex: 0, // 当前菜单下标
				tabs: ['直邀好友', '扩散好友', '待激活'],
				upOption: {
					// page: {
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 搜索无数据 ~', // 提示
						btnText: ''
					},
					textLoading: "玩命加载中 ...",
					textNoMore: "-- 人家是有底线的 --",
				},
				downOption: {
					use: false
				}
			}
		},
		methods: {
			upCallback(page) {
				//获取分类小BUG不能即使获取
				this.getinitdata(page.num, this.url[this.tabIndex]).then(res => {
					console.log(res);
					this.mescroll.endSuccess(res.length);
					//设置列表数据
					if (page.num == 1) this.datalist = []; //如果是第一页需手动制空列表
					this.datalist = this.datalist.concat(res); //追加新数据
				}).catch(error => {
					//联网失败, 结束加载
					this.mescroll.endErr();
					this.$ShowMsg('网络连接失败！');
				})
			},
			//切换菜单
			tabChange(index) {
				this.tabIndex = index;
				this.datalist = [];
				this.mescroll.resetUpScroll();
			},
			//获取列表数据
			getinitdata(pages, url) {
				return new Promise((resolve, reject) => {
					this.$HttRequest({
						url: url,
						param: {
							page: pages
						}
					}).then((res) => {
						if (res.status === 10000) {
							resolve(res.data.data);
						} else {
							this.$ShowMsg(res.message);
						}
					}).catch((error) => {
						//异常错误
						reject(error.errMsg);
					});
				});

			}
		}
	}
</script>

<style lang="scss">
	.inviteinfo {
		width: 90%;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			justify-content: center;
			align-content: center;

			.useravatar {
				border-radius: 50%;
				width: 80rpx;
				height: 80rpx;
				margin: 0 20rpx;
			}

			.userinfo {
				display: flex;
				justify-content: center;
				align-content: center;
				flex-direction: column;
				color: #808080;
				font-size: 22rpx;

				.nickname {
					color: #333;
					font-size: 28rpx;
					font-weight: bold;
					display: flex;
					justify-content: center;
					align-items: center;

					.font-normals {
						color: #FF0000;
						font-weight: normal;
						font-size: 25rpx;
					}

					.font-alredy {
						color: $uni-color-primary;
					}
				}

			}
		}

		.right {
			display: flex;
			justify-content: center;
			align-content: center;
			flex-direction: column;
			color: #808080;
			font-size: 25rpx;

			.rechange {
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
			}
		}
	}
</style>
